<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="btns">
        <!-- 让每一个按钮都携带当前在路由表的路由地址 -->
        <button data-path="/home">首页</button>
        <button data-path="/news">新闻</button>
        <button data-path="/music">音乐</button>
    </div>
    <div id="content"></div>

    <script>
        const oContent = document.getElementById("content");
        // 想要做一个路由，首先必须要拥有一个路由表
        const routes = [
            { path: "/home", component: "我是一个首页" },
            { path: "/news", component: "我是一个新闻" },
            { path: "/music", component: "我是一首歌" },
        ];
        //给所有的按钮绑定点击事件，点击切换url地址
        //但是切换地址的时候，不能刷新页面
        //h5提供了一个history.pushState的一个方法，可以在不刷新的情况下 改变浏览器地址
        //获取所有的按钮绑定点击事件
        const oBtns = document.querySelectorAll(".btns button");
        oBtns.forEach((item) => {
            item.onclick = function () {
                history.pushState(null, null, this.dataset.path);
                //没有监听pushState的改变的事件，所以我们在点击事件内，直接把视图展示处理了
                routes.forEach((item) => {
                    if (item.path === this.dataset.path) {
                        oContent.innerHTML = item.component;
                    }
                });
            };
        });


        //当使用history模式进行切换路由的时候，我们使用历史记录回退视图没有发生变化
        //所以我们要监听历史记录的改变，然后更新视图
        //使用popstate事件可以监听历史记录的改变

        window.onpopstate = function () {
            //直接通过loacation.pathname拿到当前的路径地址，然后去路由表进行对比，更新视图
            console.log(location.pathname);
            routes.forEach((item) => {
                if (item.path === location.pathname) {
                    oContent.innerHTML = item.component;
                }
            });
        };
    </script>
</body>

</html>